import Vue from 'vue';
import store from '@/store';
import { Input } from 'element-ui';
import { indexOf } from 'lodash';
/* export const clickOutside = {
	//自定义指令：clickOutside
	bind(el, bindings, vnode) {
		//自定义指令生命周期：bind ；参数：el, bindings, vnode
		let handler = e => {
			e.stopPropagation();
			bindings.value(el, el === e.target);
		};
		el.handler = handler;
		document.addEventListener('click', handler);
	},
	unbind(el) {
		document.removeEventListener('click', el.handler);
	}
}
export const nodeConfig = {
	bind(el, bindings, vnode) {
		//创建div
		el.addEventListener('mouseover', e => {
			e.stopPropagation();
			el.style.setProperty('border-color', '#f0f');
		})
		el.addEventListener('mouseout', e => {
			e.stopPropagation();
			el.removeAttribute('style');
		})
	},
	unbind(el) {
		el.removeEventListener('mouseenter', () => {})
		el.removeEventListener('mouseout', () => {})
	}
} */
const getCharacterWidth = (char, style) => {
	let canvas = document.createElement('canvas');
	let context = canvas.getContext('2d');
	context.font = style.font;
	context.fontWeight = style.fontWeight;
	return context.measureText(char).width;
}
export const autowidth = {
	bind(el, bindings, vnode) {
		el.style.minWidth = bindings.value.minWidth;
		el.style.maxWidth = bindings.value.maxWidth;
	},
	update(el, bindings, vnode) {
		let modelValue = vnode.data.model.value;
		let inputEle = el.querySelector('input');
		let inputStype = window.getComputedStyle(inputEle);
		let minWidth = parseInt(bindings.value.minWidth, 10);
		let paddingLeft = parseInt(inputStype.paddingLeft, 10);
		let paddingRight = parseInt(inputStype.paddingRight, 10);
		let valueWidth = getCharacterWidth(modelValue, inputStype);
		if (valueWidth + paddingLeft + paddingRight + 2 > minWidth) {
			el.style.width = valueWidth + paddingLeft + paddingRight + 2 + 'px';
		} else {
			el.style.width = 'auto';
		}
	}
}

export const removeAriaHidden = {
	bind(el, binding) {
		let ariaEls = [];
		if (binding.arg === 'popover') {
			ariaEls = el.querySelectorAll('.el-popover');
		} else if (binding.arg === 'radio') {
			ariaEls = el.querySelectorAll('.el-radio__original');
		} else if (binding.arg === 'checkbox') {
			ariaEls = el.querySelectorAll('.el-checkbox__original');
		}
		ariaEls.forEach((item) => item.removeAttribute('aria-hidden'));
	}
}

export const idCard = {
	inserted(el, binds) {
		let ele;
		let bindsValue = binds.value;
		let inputs = el.tagName === 'INPUT' ? el : el.querySelectorAll('input');
		for (let input of inputs) {
			if (!input.parentNode.classList.contains('el-input--suffix')) {
				ele = input;
				break;
			}
		}
		if (!ele) return false;
		ele.addEventListener('input', e => {
			let originalValue = e.target.value;
			let replaceValue = originalValue.replace(/[^\dXx]/g, '');
			if (replaceValue.length <= bindsValue - 1) {
				replaceValue = replaceValue.replace(/[^\d]/g, '');
			} else if (replaceValue.length === bindsValue) {
				replaceValue = replaceValue.toUpperCase();
			} else {
				replaceValue = replaceValue.substring(0, bindsValue);
			}
			if (originalValue !== replaceValue) {
				e.target.value = replaceValue;
				e.target.dispatchEvent(new Event('input'));
			}
		});
		ele.addEventListener('paste', e => {
			e.preventDefault();
			let pasteValue = e.clipboardData.getData('text');
			let replaceValue = pasteValue.replace(/[^\dXx]/g, '').toUpperCase();
			while (!!replaceValue.charIndex('X') && replaceValue.charIndex('X') < bindsValue) {
				let index = replaceValue.charIndex('X') - 1;
				replaceValue = `${replaceValue.substring(0, index)}${replaceValue.substring(index + 1)}`;
			}
			e.target.value = replaceValue.substring(0, bindsValue);
			e.target.dispatchEvent(new Event('input'));
		})
	}
}

export const htmlDescript = {
	bind(el, bindings, vnode) {
		let content = document.createElement('div');
		//let text = Vue.prototype.$cleanHtmlTag(bindings.value);
		content.className = 'descont';
		if (!bindings.value) {
			content.innerHTML = '无';
		} else {
			let html = Vue.prototype.$substringHtml(bindings.value, 80);
			let button = document.createElement('button');
			button.innerText = '展开';
			button.setAttribute('hand', false);
			content.innerHTML = html;
			button.addEventListener('click', (e) => {
				let isUnfold = JSON.parse(e.target.getAttribute('hand'));
				button.setAttribute('hand', !isUnfold);
				button.innerText = !isUnfold ? '收起' : '展开';
				content.innerHTML = !isUnfold ? bindings.value : html;
			})
			el.appendChild(button);
		}
		el.appendChild(content);
	},
	inserted(el, bindings) {},
	update(el, bindings, vnode) {
		let content = el.getElementsByClassName('descont')[0];
		let button = el.getElementsByTagName('button')[0];
		if (!bindings.value) return false;
		content.innerHTML = Vue.prototype.$substringHtml(bindings.value, 80);
	},
	componentUpdated(el) {
		// console.log(el);
	}
}

//按钮权限指令
export const hasPermi = {
	inserted(el, bindings, vnode) {
		let value = bindings.value;
		let authButton = store.getters.authButton;
		if (!value || !authButton.some(item => item.id === value)) {
			el.parentNode?.removeChild(el);
		}
	},

	update(el, bindings) {
		let value = bindings.value;
		let authButton = store.getters.authButton;
		if (!!bindings.value && authButton.some(item => item.id === value)) {
			if (!el.parentNode) {
				el.__v_originalParent.insertBefore(el, el.__v_anchor || null);
			}
		} else {
			if (el.parentNode) {
				el.__v_anchor = document.createComment("");
				el.__v_originalParent = el.parentNode;
				el.parentNode.replaceChild(el.__v_anchor, el);
			}
		}
	}
}

//多行溢出省略号
export const ellipsis = {
	inserted(el, binding) {
		el.className = 'sw_mult_ellipsis';
		el.style.webkitLineClamp = binding.value || 2;
	},
	update: function(el, binding) {
		if (binding.value === binding.oldValue) return false;
		el.style.webkitLineClamp = binding.value || 2;
	}
}